<template>
  <div>
    <el-button type="primary" @click="isShow=true">显示</el-button>
    <el-dialog
      v-model="isShow"
      title="模态框学习"
      width="800"
      align-center
    >
      <div class="big-box">
       <div class="dialog-content">
        <div class="ab-box">
          <el-scrollbar height="100%">
            <talkItem v-for="value in 2" :key="value" :data="value" :isMe="value === 2">1231123</talkItem>
          </el-scrollbar>
        </div>
       </div>
       <div class="dialog-input">
        <editorBox v-model="text" />
       </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import editorBox from '@/componend/editorBox.vue'
import talkItem from './talkItem.vue';
  export default {
    components: {
      editorBox,
      talkItem
    },
    data() {
      return {
        isShow: true,
        text: ''
      }
    }
  }
</script>

<style lang="scss" scoped>
.big-box{
  height: 750px;
  display: flex;
  flex-direction: column;
  .dialog-content{
    flex: 1;
    position: relative;
    .ab-box{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
  .dialog-input{
    height: 350px;
  }
}
</style>